<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>

  <body>
    <div>
      <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
      <button>点击</button>
    </div>
    <script>
      /*
       * DOM:document Object Model(文档对象模型)
       * 1.获取元素节点的方式
       *    1.1 ES5之前：(四种)
       *       1.1.1 通过ID:document.getElementById("box1");
       *       1.1.2 通过标签：document.getElementsByTagName("div");返回的是伪数组
       *       1.1.3 通过类名：document.getELementsByClassName("div");
       *    1.2 ES6后：
       *       1.2.1 document.querySelectorAll("#ul>li");
       *       1.2.2  document.querySelector("button");
       * */
      //var lis = document.getElementsByTagName("li");
      var lis = document.querySelectorAll("#ul>li");
      var btn = document.querySelector("button");
      btn.onclick = (function () {});
      setInterval(function () {
        for (var i = 0; i < lis.length; i++) {
          for (var j = 0; j < lis.length; j++) {
            if (i == j) {
              lis[j].style.background = "blue";
            } else {
              lis[j].style.background = "white";
            }

          }
        }
      }, 200)
      doc
      //console.log(lis);
    </script>
  </body>

</html>